<template>
	<view class="inviter">
		<image class="img" id="bgImg" src="https://wanxian-test.oss-cn-shenzhen.aliyuncs.com/8695356.png" mode=""></image>
		<view class="contant_box">
	<!-- 		<view class="slip-title">
				<view class="img">
					<image src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/SSdTpLApdQ_goto_icon_white.png" mode="" @click="gotoBack"></image>
				</view>
				<view class="txt">码上分享</view>
			</view> -->
			<view class="code_txt"></view> 
			<view class="invitation_txt">
				<view class=""></view>
				<view class="my-mgt-8"><text class="col"></text></view>
			</view>
			<view class="qrcode-img my-mgt-15">
				<canvas canvas-id="qrcode" style="width: 150px;height: 150px; margin: auto;" />
			</view>
			 <view class="savaimg">
				<view class="btn_txt" @click="savePhoto">点击保存</view>
			</view>
			<!-- <canvas canvas-id="myCanvas" width="100%" height="100%"></canvas> -->
			
		</view>
		<tabbar></tabbar>
	</view>
</template>

<script>
	import uQRCode from '@/common/uqrcode.js';
	import { getuserDataApi} from "@/api/myinter.js"
	import tabbar from "@/components/tabbar/tabbar.vue";
	import {baseURL} from "@/utils/req.js"
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				inviteCode:'',
				qrCodeImg:'',
				img:'',
			};
		},
		// onLoad() {
		// 	let that = this;
		// 	 wx.downloadFile({
		// 		url: 'https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/LdsuKJWmOS_scord_icon.png',
		// 		success:(res)=>{
		// 			const ctx = wx.createCanvasContext('myCanvas')
		// 			let imgW = res.width
		// 			let imgH = res.height
		// 			ctx.drawImage(that.qrCodeImg, 0, 0, imgW, imgH)
		// 			var re = wx.getSystemInfoSync();
		// 			var scale = 750 / 180;
		// 			var width = re.windowWidth / scale;
		// 			var height = width
		// 			var leftscale = 750 / 480; // 180为left
		// 			var left = re.windowWidth / leftscale;
		// 			var topscale = 750 / 880; // 180为top
		// 			var top = re.windowWidth / topscale;
		// 			ctx.drawImage(res.tempFilePath, left, top, width, height)
		// 			ctx.draw()   
					
					
		// 			 setTimeout(() => {
		// 				// code_url = this.canvasToTempImage();
		// 				//获取临时缓存合成照片路径，存入data中
		// 				   wx.canvasToTempFilePath({
		// 				     canvasId: 'myCanvas',
		// 				     success: function (res) {
		// 				       that.img = res.tempFilePath;
		// 				       console.log(res.tempFilePath)
		// 				     },
		// 				     fail: function (res) {
		// 				       console.log(res);
		// 				     }
		// 				   });
		// 			}, 1000);
					
		// 		}
		// 	 })
		// },
		created() {
			this.getUserData()
		},
		methods: {
			savePhoto(){
				let that = this;
				wx.saveImageToPhotosAlbum({
					filePath:that.img,
					success:(res)=>{
						wx.showModal({
						    content: '保存成功',
						    confirmText: '确认',
						    showCancel: false,
						    success: function (res) {
								console.log(res,887776);
						    }
						});
					},
					fail: function (res) {
					    wx.showModal({
							content: '保存失败',
							confirmText: '确认',
							showCancel: false,
							success: function (res) {
												
							}
					    });
					}
				})
			},
			async getUserData(){
				uni.showLoading({
					title:"正在加载中...."
				})
				const res = await getuserDataApi({})
				if(res.statusCode===200){
					uni.hideLoading()
					this.inviteCode = res.data.data.inviteCode
					this.make();
				}
			},
			make() {
				let url = baseURL + `/user/register?inviteCode=${this.inviteCode}`
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: url ,
					size: 150,
					margin: 10,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					correctLevel: uQRCode.errorCorrectLevel.H,
					success:(res) => {
						this.qrCodeImg = res
					}
				})
			},
			gotoBack(){
				uni.switchTab({
					url:"/pages/main/homePages"
				})
			},
			// 保存图片到相册
			savaPhoto(){
				let _this = this
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.inviter {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		position: relative;
		.img{
			width: 100%;
			height: 100%;
			margin-top: -10rpx;
		}
		.box_pos{
			position: absolute;
			top: 160rpx;
			left: 85rpx;
		}
		.contant_box{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0rpx;
			left: 0rpx;
			.slip-title{
				width: 100%;
				height: 150rpx;
				display: flex;
				padding-top: 80rpx;
				.img{
					width:15%;
					height: 100%;
					padding-top: 13rpx;
					image{
						width: 38rpx;
						height: 38rpx;
						padding-left: 29rpx;
					}
				}
				.txt{
					width: 70%;
					height: 100%;
					text-align: center;
					font-size: 37rpx;
					font-weight: bold;
					color: #FFFFFF;
				}
			}
			.code_txt{
				width: 100%;
				height: 120rpx;
				text-align: center;
				line-height: 120rpx;
				font-size: 82rpx;
				font-weight: 800;
				color: #FFFFFF;
			}
			.invitation_txt{
				width: 100%;
				height: 180rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				font-weight: 500;
				color: #000000;
				margin-top: 320rpx;
				.col{
					color: #F5484F;
				}
			}
			.qrcode-img {
				margin: auto;
				width: 155px;
				height: 155px;
				border: 3rpx solid #FFFFFF;
			}
			.savaimg{
				margin-top: 20rpx;
				height: 58rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50rpx;
				margin-left: 33%;
				margin-right: 33%;
				  background-image: -moz-linear-gradient( 90deg, rgb(254,36,49) 0%, rgb(254,80,90) 100%);
				  background-image: -webkit-linear-gradient( 90deg, rgb(254,36,49) 0%, rgb(254,80,90) 100%);
				  background-image: -ms-linear-gradient( 90deg, rgb(254,36,49) 0%, rgb(254,80,90) 100%);
				  box-shadow: 0rpx 8rpx 6rpx 0rpx rgba(35, 24, 21, 0.4);
				  background-color: #fe2834;
				.btn_txt{
				
					  font-size: 30rpx;
					  font-family: "Adobe Heiti Std";
					  color: rgb(255, 254, 254);
					  z-index: 167;
			
		
				}
			}
		}
	}
</style>
